<template>
  <div>
  <form class="login-form" v-if="login">
    <div class="login-form">
      <h1>网站登录</h1>

      <div class="txtb">
        <input type="text"  v-model="data_form.userName" placeholder="用户名">
      </div>

      <div class="txtb">
        <input type="passWord" v-model="data_form.passWord" placeholder="密码">
      </div>

      <el-button class="logbtn" @click="goHome" >登录</el-button>

      <div class="bottom-text">
        还没有账户？<el-button type="danger"  @click="changeLogin(false, true)" >注册</el-button>
      </div>

    </div>

  </form>

    <form  class="login-form" v-if="!login">
      <div class="login-form-sign">
        <h1>注册账户</h1>

        <div class="txtb">
          <input type="text" v-model="data_form.userName" placeholder="用户名">
        </div>

        <div class="txtb">
          <input type="passWord" v-model="data_form.passWord" placeholder="密码">
        </div>

        <div class="txtb">
          <input type="passWord" v-model="confirmpassWord"  placeholder="确认密码">

        </div>

        <el-button class="logbtn" @click="goLogin" >注册</el-button>

        <div class="bottom-text">
          已有帐户？ <el-button type="warning"  @click="changeLogin(true, false)">登录</el-button>
        </div>

      </div>

    </form>
  </div>


</template>

<script>
    import {register,login} from '../service/login&register'
    import axios from "axios";
    import util from '../util';
    export default {
        name: "login",
        data(){
            return {
                login: false,
                register: true,
                data_form:{
                  userName: '',
                  passWord: '',
                },
                confirmpassWord: '',
            }
        },
        methods: {
            goLogin(){
                if(!this.data_form.userName || !this.data_form.passWord ){
                    window.alert('账号或密码不能为空');
                    return;
                }
                if(this.data_form.passWord!== this.confirmpassWord){
                    window.alert('密码不一致，请重新输入');
                    this.data_form.passWord = '';
                    this.confirmpassWord = '';
                }else{
                      register(this.data_form).then((res)=>{
                      console.log(res.data.msg)
                    window.localStorage.setItem('userName', this.data_form.userName);
                    window.localStorage.setItem('passWord', this.data_form.passWord);
                    this.register = false;
                    window.localStorage.setItem('loginStatus', 'login');
                    this.$store.commit('getUser', this.data_form.userName);
                    window.alert('注册成功，确定进入网站首页');
                    window.location.href = '/homepage';
                    //  this.$router.push('/list').catch(err => ( console.log(err)))
                    }).catch((err)=>{
                      console.log(err)
                    })
                }
            },
            changeLogin(b1, b2){
                this.login = b1;
                this.register = b2;
            },
            goHome(){
                let userName = window.localStorage.getItem('userName');
                let passWord = window.localStorage.getItem('data_form.passWord');
                if(!this.data_form.userName || !this.data_form.passWord ){
                    window.alert('账号或密码不能为空');
                    return;
                }else{
                  login(this.data_form).then((res)=>{
                    console.log(res.data.msg)
                    window.localStorage.setItem('userName', this.data_form.userName);
                    window.localStorage.setItem('passWord', this.data_form.passWord);
                    window.localStorage.setItem('loginStatus', 'login');
                    this.$store.commit('getUser', this.data_form.userName);

                    window.alert('登录成功，确定进入网站首页');
                    // window.location.href = '/homepage';
                     this.$router.push('/list').catch(err => ( console.log(err)))
                  }).catch((err)=>{
                    console.log(err)
                  })

                }
                // if(userName === this.userName && passWord === this.data_form.passWord){
                //     this.login = false;
                //     window.localStorage.setItem('loginStatus', 'login');
                //     this.$store.commit('getUser', this.userName);
                //     window.alert('登陆成功，确定进入网站首页');
                //     // window.location.href = '/homepage';
                // }else{
                //     window.alert('账号或密码错误');
                // }
            },
        },
        mounted(){
            const loginStatus = window.localStorage.getItem('loginStatus')
            if(loginStatus=='login'){
              this.login = false;
              this.register = false;
              this.$notify({
                message: '您已是登陆状态',
                type:"success"
              });
              this.$router.push('/list')
            }
        }
    }
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: montserrat;
  box-sizing: border-box;
}

body{
  min-height: 100vh;
  background-image: linear-gradient(120deg, #3498db, #8e44ad);
}

.login-form{
  width: 360px;
  background: whitesmoke;
  height: 500px;
  padding: 80px 40px;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.login-form-sign{
  width: 360px;
  background: whitesmoke;
  height: 580px;
  padding: 80px 40px;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.login-form h1{
  text-align: center;
  margin-bottom: 60px;
}

.txtb{
  border-bottom: 2px solid #adadad;
  position: relative;
  margin: 30px 0;
}

.txtb input{
  font-size: 15px;
  color: #333;
  border: none;
  width: 100%;
  outline: none;
  background: none;
  padding: 0 5px;
  height: 40px;
}

.txtb span::before{
  content: attr(data-placeholder);
  position: absolute;
  top: 50%;
  left: 5px;
  color: #adadad;
  transform: translateY(-50%);
  z-index: -1;
  transition: .5s;
}

.txtb span::after{
  content: '';
  position: absolute;
  left: 0%;
  top: 100%;
  width: 0%;
  height: 2px;
  background: linear-gradient(120deg, #3498db, #8e44ad);
  transition: .5s;
}

.focus + span::before{
  top: -5px;
}

.focus + span::after{
  width: 100%;
}

.logbtn{
  display: block;
  width: 100%;
  height: 50px;
  border: none;
  background: linear-gradient(120deg, #3498db, #8e44ad, #3498db);
  background-size: 200%;
  color: #fff;
  outline: none;
  cursor: pointer;
  transition: .5s;
}

.logbtn:hover{
  background-position: right;
}

.bottom-text{
  margin-top: 60px;
  text-align: center;
  font-size: 13px;
}


</style>
